import { Card } from 'choerodon-ui';
import React, {useState} from 'react';

const tabList = [{
  key: 'tab1',
  tab: 'tab1',
}, {
  key: 'tab2',
  tab: 'tab2',
}];

const tabListNoTitle = [{
  key: 'article',
  tab: 'article',
}, {
  key: 'app',
  tab: 'app',
}, {
  key: 'project',
  tab: 'project',
}];

const contentList = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
};


const contentListNoTitle = {
  article: <p>article content</p>,
  app: <p>app content</p>,
  project: <p>project content</p>,
};

const cardTab: React.FC = () => {

  const [key, setkey] = useState('tab1');
  const [noTitleKey, setnoTitleKey] = useState('app');

  const onTabChange = (_keyValue:string, type:string) => {
    if(type === 'key'){
      setkey(key);
    }else{
      setnoTitleKey(key);
    }
  };

  return (
    <div>
      <Card
        style={{ width: '100%' }}
        title="Card title"
        extra={<a href="#">More</a>}
        tabList={tabList}
        onTabChange={(keyValue) => { onTabChange(keyValue, 'key'); }}
      >
        {contentList[key]}
      </Card>
      <br /><br />
      <Card
        style={{ width: '100%' }}
        tabList={tabListNoTitle}
        activeTabKey={noTitleKey}
        onTabChange={(keyValue) => { onTabChange(keyValue, 'noTitleKey'); }}
      >
        {contentListNoTitle[noTitleKey]}
      </Card>
    </div>
  );
};

export default cardTab;